<template>
  <div class="home">
		<headtop :title="titla">
			<router-link slot="rg"	to="/user" class="icon iconfont icon-user"></router-link>
		</headtop>
		<div class="main-bd">
			<div class="date-wrap">{{getyear}}</div>
			<div class="mp-wrap">
				<progresst title="当月进度" :val="getdayof" :isshow="true"></progresst>
				<progresst title="月销售完成度" :val="getdayof" :isshow="true"></progresst>
				<progresst title="有效商店数" :val="getdayof" :isshow="false"></progresst>
			</div>
		</div>
		 <div class="main-nav">
		  <div class="nav-cell" v-for="i in 9" :key="i">
	        <template v-if="i <= menuList.length">
		      <menu-cell
		        :url="menuList[i - 1].url"
		        :img-url="menuList[i - 1].imgUrl"
		        :menu-name="menuList[i - 1].menuName"
		      >
		      </menu-cell> 
		    </template> 
		  </div>
		</div>
  </div>
</template>

<script>
import headtop from "./tophead"
import progresst from "./progresst"
// import service from '../service';
import menuCell from './MenuCell';



export default {
  name: 'home',
  data () {
    return {
		msg: 'Welcome to Your Vue.js App',
		titla:"SFA",
		menuList : [
		  {
		    menuName: '公司通告',
		    imgUrl: require('@/assets/img/gstg.png'),
		    url: '/notice'
		  },
		  {
		    menuName: '进店拜访',
		    imgUrl: require('@/assets/img/jdbf.png'),
		    url: '/visitshop'
		  },
		  {
		    menuName: '电话订单',
		    imgUrl: require('@/assets/img/dhdd.png'),
		    url: '/phoneorder'
		  },
		  {
		    menuName: '订单状态',
		    imgUrl: require('@/assets/img/ddzt.png'),
		    url: '/orders'
		  },
		  {
		    menuName: '培训资料',
		    imgUrl: require('@/assets/img/pxzl.png'),
		    url: '/training'
		  },
		  {
		    menuName: '消息中心',
		    imgUrl: require('@/assets/img/xxzx.png'),
		    url: '/message'
		  },
		  {
		    menuName: '新增门店',
		    imgUrl: require('@/assets/img/xzmd.png'),
		    url: '/addedshop'
		  },
		  {
		    menuName: '数据同步',
		    imgUrl: require('@/assets/img/sjtb.png'),
		    url: '/asyncdata'
		  }
		]
    }
  },
	created() {
	  // axios.get('/api/getUserProgress')
	  service.getUserProgress().then(res => {
	    this.mounthSealsPercent = parseInt(res.data.monthPercent * 100);
	    this.shops = res.data.totalShops;
	  });
	},
	mounted(){// 绘制图表 https://www.cnblogs.com/Smiled/p/7686316.html(参考文章)

	},
	methods: {
		
	},
	computed: {
		getyear() {
			let t=new Date();
			return `${t.getFullYear()}年${t.getMonth()+1}月`; 
		},
		getdayof(){
			let t=new Date();
			return parseInt((t.getDate()/30)*100)
		}
	},
	components:{
		headtop,
		progresst,
		menuCell
	}
}
</script>
<style>
	html,body,#app{height: 100%;}
</style>

<style lang="scss" scoped>
	
	.home{
	 display: flex;
	 flex-direction:column;
	 height: 100%;
	 background: #FFFFFF;
		.main-bd{
			background-color: #FFFFFF;
			.date-wrap{
				padding:px2rem(34) 0 px2rem(22) 0;
				font-size: $text-size-imp;
				color: #000;
				text-align: center;
			}
			.mp-wrap{
				display: flex;
				justify-content: space-around;
				
			}
		}
		.main-nav {
			flex: 1;
			padding: 0 px2rem(30);
			display: flex;
			flex-flow: row wrap;
			align-content: stretch;
			align-items: stretch;
			border-top: 1px solid #ccc;
			.nav-cell {
			  border-bottom: 1px solid #ccc;
			  border-right: 1px solid #ccc;
			  flex: 1 1 30%;
			}
			.nav-cell:nth-child(3n) {
			  border-right: none;
			}
		  }
	}
</style>
